<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名生成器 | 全球文化姓名库 + 网名</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/data.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/app.js"></script>

</head>

<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-signature"></i>
                </div>
                <h1>姓名生成器</h1>
            </div>
            <p class="subtitle">探索全球文化，生成个性化姓名或创意网名，适合小说角色、游戏人物或您的创意项目</p>

            <div class="featured-names">
                <div class="featured-name" data-origin="chinese">张明轩</div>
                <div class="featured-name" data-origin="japanese">山田太郎</div>
                <div class="featured-name" data-origin="english">Olivia Williams</div>
                <div class="featured-name" data-origin="french">Sophie Dubois</div>
                <div class="featured-name" data-origin="internet">暗夜星辰</div>
                <div class="featured-name" data-origin="internet">SilentWalker</div>
            </div>
        </header>

        <div class="type-selector">
            <div class="type-option active" data-type="real">真实姓名</div>
            <div class="type-option internet" data-type="internet">创意网名</div>
        </div>

        <div class="generator-container">
            <div class="control-panel">
                <h2 class="panel-title"><i class="fas fa-sliders-h"></i> 生成设置</h2>

                <div class="form-group">
                    <label class="form-label">姓名文化</label>
                    <div class="select-wrapper">
                        <select id="culture">
                            <option value="random">随机文化</option>
                            <option value="chinese">中文姓名</option>
                            <option value="english">英文姓名</option>
                            <option value="japanese">日本姓名</option>
                            <option value="korean">韩国姓名</option>
                            <option value="french">法国姓名</option>
                            <option value="french">新加坡姓名</option>
                            <option value="french">美国姓名</option>
                            <option value="french">泰国姓名</option>
                            <option value="french">印度姓名</option>

                        </select>
                    </div>
                </div>

                <div class="form-group" id="gender-group">
                    <label class="form-label">性别</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="radio" name="gender" value="any" checked>
                            任意性别
                        </label>
                        <label class="checkbox-label">
                            <input type="radio" name="gender" value="male">
                            男性
                        </label>
                        <label class="checkbox-label">
                            <input type="radio" name="gender" value="female">
                            女性
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">生成数量</label>
                    <div class="slider-container">
                        <input type="range" id="quantity" min="1" max="21" value="12">
                        <div class="number-display" id="quantity-display">12</div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">其他选项</label>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="show-meaning">
                            显示含义
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" id="allow-unisex" checked>
                            允许中性名
                        </label>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn btn-primary" id="generate-btn">
                        <i class="fas fa-magic"></i> 生成姓名
                    </button>
                    <button class="btn btn-internet" id="generate-internet-btn">
                        <i class="fas fa-globe"></i> 生成网名
                    </button>
                    <button class="btn btn-secondary" id="reset-btn">
                        <i class="fas fa-redo"></i> 重置
                    </button>
                </div>
            </div>

            <div class="result-panel">
                <h2 class="panel-title"><i class="fas fa-list"></i> 生成结果 <span id="result-count">(0)</span></h2>

                <div class="results-container" id="results-container">
                    <div class="empty-state">
                        <i class="fas fa-file-signature"></i>
                        <p>点击"生成姓名"按钮开始创建</p>
                    </div>
                </div>

                <div class="actions">
                    <div class="result-count">
                        <i class="fas fa-info-circle"></i>
                        <span>已生成 <span id="generated-count">0</span> 个姓名</span>
                    </div>
                    <button class="export-btn" id="export-btn">
                        <i class="fas fa-download"></i> 导出结果
                    </button>
                </div>
            </div>
        </div>

        <!-- 名字详情面板 -->
        <div class="name-details">
            <h2 class="details-title"><i class="fas fa-info-circle"></i> 名字详情</h2>
            <div class="details-content">
                <div class="empty-details">
                    <i class="fas fa-hand-pointer"></i>
                    <p>点击任意名字查看详细信息</p>
                </div>
            </div>
        </div>

        <footer>
            <p>© 2023 姓名生成器 | 包含全球超过 15,000 个姓名数据 | 新增创意网名功能</p>
        </footer>
    </div>
</body>

</html>